<template>
	<view class="flex flex-column flex-1">
		<!-- <uni-nav-bar :fixed="true" left-icon="back" title="烟气自动监测设备日常巡检记录表" color="#156DAC" @clickLeft="pageback"></uni-nav-bar> -->
		<view class="form-title">
			<text>检修记录表</text>
		</view>
			<view class="user-form">
				<view class="user-form-item">
					<view class="form-label">故障类型</view>
					<view class="form-input">
						<picker class="select" @change="(e)=>setFormData(e)" :value="faultType" :range="faultTypeList" range-key="codeName">
							<view v-if="faultTypeList[getSelectIndex(faultTypeList,faultType,'code')] && faultTypeList[getSelectIndex(faultTypeList,faultType,'code')].codeName" class="flex-justify-between">
								{{(faultTypeList[getSelectIndex(faultTypeList,faultType,'code')].codeName)}}
								<uni-icons class="icon" type="arrowdown" size="12" color="#333"></uni-icons>
							</view>
							<view v-else class="empty-data flex-justify-between">
								<text>请选择</text>
								<uni-icons class="icon" type="arrowdown" size="12" color="#aaa"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="user-form-item"><view class="form-label">设备名称</view><view class="form-input"><input class="form-input" v-model="form.key1"></view></view>
				<view class="user-form-item"><view class="form-label">规格型号</view><view class="form-input"><input class="form-input" v-model="form.key2"></view></view>
				<view class="user-form-item"><view class="form-label">设备编号</view><view class="form-input"><input class="form-input" v-model="form.key3"></view></view>
				<view class="user-form-item">
					<view class="form-label">安装时间</view>
					<view class="form-input">
						<TimeSelector
							class="form-ipt"
						    showType="dateToTime"
							@btnConfirm="(e)=>dateChange(e,'key4')" 
						>
						    <text v-if="form.key4">{{form.key4}}</text>
							<text v-else style="color: grey;">请选择时间</text>
						</TimeSelector>
					</view>
				</view>
				<view class="user-form-item"><view class="form-label">安装地点</view><view class="form-input"><input class="form-input" v-model="form.key5"></view></view>
				<view class="user-form-item"><view class="form-label">维护管理单位</view><view class="form-input"><input class="form-input" v-model="form.key6"></view></view>
				<uni-collapse accordion="true">
					<uni-collapse-item title="故障维修信息" :open="true" class="inner-loop-table-collapse">
						<div class="user-form-item">
							<div class="loop-form-table">
								<div class="loop-form-table-row">
									<div class="text-center loop-form-table-item">事项</div>
									<div class="text-center loop-form-table-item">情况</div>
									<div class="text-center loop-form-table-item">管理员/校验人</div>
									<div class="text-center loop-form-table-item">日期</div>
									<div class="text-center loop-form-table-item">维修/责任人</div>
									<div class="text-center loop-form-table-item">日期</div>
								</div>
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">故障情况及发生时间</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key7"></div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key8"></div>
									<div class="text-center loop-form-table-item">
										<TimeSelector
											class="form-ipt"
										    showType="date"
											@btnConfirm="(e)=>dateChange(e,'key9')" 
										>
										    <text v-if="form.key9">{{form.key9}}</text>
											<text v-else style="color: grey;">请选择日期</text>
										</TimeSelector>
									</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key10"></div>
									<div class="text-center loop-form-table-item">
										<TimeSelector
											class="form-ipt"
										    showType="date"
											@btnConfirm="(e)=>dateChange(e,'key11')" 
										>
										    <text v-if="form.key11">{{form.key11}}</text>
											<text v-else style="color: grey;">请选择日期</text>
										</TimeSelector>
									</div>
								</div>
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">修复后使用前校验时间、 校验结果说明</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key12"></div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key13"></div>
									<div class="text-center loop-form-table-item">
										<TimeSelector
											class="form-ipt"
										    showType="date"
											@btnConfirm="(e)=>dateChange(e,'key14')" 
										>
										    <text v-if="form.key14">{{form.key14}}</text>
											<text v-else style="color: grey;">请选择日期</text>
										</TimeSelector>
									</div>
									<div class="loop-form-table-item"></div>
									<div class="loop-form-table-item"></div>
								</div>
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">正常投入使用时间</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key15"></div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key16"></div>
									<div class="text-center loop-form-table-item">
										<TimeSelector
											class="form-ipt"
										    showType="date"
											@btnConfirm="(e)=>dateChange(e,'key17')" 
										>
										    <text v-if="form.key17">{{form.key17}}</text>
											<text v-else style="color: grey;">请选择日期</text>
										</TimeSelector>
									</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key18"></div>
									<div class="text-center loop-form-table-item">
										<TimeSelector
											class="form-ipt"
										    showType="date"
											@btnConfirm="(e)=>dateChange(e,'key19')" 
										>
										    <text v-if="form.key19">{{form.key19}}</text>
											<text v-else style="color: grey;">请选择日期</text>
										</TimeSelector>
									</div>
								</div>
							</div>
						</div>		
					</uni-collapse-item>
				</uni-collapse>		
				
				<!--  记录表2 表分割线线  -->
				<view class="user-form-item"><view class="form-label">站点名称</view><view class="form-input"><input class="form-input" v-model="form.key20"></view></view>
				<view class="user-form-item">
					<view class="form-label">停机时间</view>
					<view class="form-input">
						<TimeSelector
							class="form-ipt"
						    showType="dateToTime"
							@btnConfirm="(e)=>dateChange(e,'key21')" 
						>
						    <text v-if="form.key21">{{form.key21}}</text>
							<text v-else style="color: grey;">请选择时间</text>
						</TimeSelector>
					</view>
				</view>
				<uni-collapse accordion="true">
				  <template v-for="(arr,i) in tableLabels">
					<uni-collapse-item :title="arr[0]"  class="inner-loop-table-collapse">
						<div class="user-form-item">
							<div class="loop-form-table">
								<template v-for="(label,j) in arr[1]">
									<div v-if="j==0" class="loop-form-table-row">
										<div class="loop-form-table-item">{{ label }}</div>
										<div class="loop-form-table-item">
										  <input class="form-input" v-model="form['key'+(21+arr[2]*1+1)]" />
										  <!-- {{ (2+arr[2]*1+1) }} -->
										</div>
									</div>
								  <div v-else class="loop-form-table-row">
									<div class="loop-form-table-item">{{ label }}</div>
									<div class="loop-form-table-item">
									  <input class="form-input" v-model="form['key'+(21+arr[2]*1+j*1+1)]" />
									  <!-- {{ (2+arr[2]*1+j*1+1) }} -->
									</div>
								  </div>
								</template>
							</div>
						</div>
					</uni-collapse-item>
				  </template>
				 </uni-collapse>
				<view class="user-form-item">
					<view class="form-label">站房清理</view>
					<view class="form-input">
						<input class="form-input" v-model="form.key50">
					</view>
					<view class="form-input" style="margin-left: 10upx;">
						<input class="form-input" v-model="form.key51">
					</view>
				</view>
				<view class="user-form-item">
					<view class="form-label">停机检修情况总结</view>
					<view class="form-input"><input class="form-input" v-model="form.key52"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">备注</view>
					<view class="form-input"><input class="form-input" v-model="form.key53"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">检修人</view>
					<view class="form-input"><input class="form-input" v-model="form.key54"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">离站时间</view>
					<view class="form-input">
						<TimeSelector
							class="form-ipt"
							showType="dateToTime"
							@btnConfirm="(e)=>dateChange(e,'key55')" 
						>
							<text v-if="form['key55']">{{form['key55']}}</text>
							<text v-else style="color: grey;">请选择时间</text>
						</TimeSelector>
						
					</view>
				</view>
				<!-- 上传 -->
				<view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传图片</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUpload ref="imgUpload" :list="imgList" :disabled="isDetail"/>
						</view>
					</view>
				</view>
				<!-- <view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传视频</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUploadVideo />
						</view>
					</view>
				</view> -->
			</view>
	</view>
</template>
<script>
	var  graceChecker = require("../../../common/graceChecker.js");
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import TmUpload from '@/components/tm-upload/tm-upload.vue'
	import TmUploadVideo from '@/components/tm-upload-video/tm-upload-video.vue'
	import LbPicker from '@/components/lb-picker'
	
	import {getDict} from "@/common/dict.js"
	
	export default {
		components: {
			uniIcons,uniPopup,uniNavBar,TimeSelector,TmUpload,TmUploadVideo,LbPicker
		},
		props:{
			obj: {
				type: Object,
				default: ()=>{}
			},
			isDetail: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				typeList: [],
				tableValue: [],
				form:{
					key0:'', key1:'', key2:'', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'', key10:'', key11:'', key12:'', key13:'', key14:'', key15:'', key16:'', key17:'', key18:'', key19:'', key20:'', key21:'', key22:'', key23:'', key24:'', key25:'', key26:'', key27:'', key28:'', key29:'', key30:'', key31:'', key32:'', key33:'', key34:'', key35:'', key36:'', key37:'', key38:'', key39:'', key40:'', key41:'', key42:'', key43:'', key44:'', key45:'', key46:'', key47:'', key48:'', key49:'', key50:'', key51:'', key52:'', key53:'', key54:'', key55:'', key56:'', key57:'', key58:'', key59:'', key60:'', key61:'', key62:'', key63:'', key64:'', key65:'', key66:'', key67:'', key68:'', key69:'', key70:'', key71:'', key72:'', key73:'', key74:'', key75:'', key76:'', key77:'', key78:'', key79:'', key80:'', key81:'', key82:'', key83:'', key84:'', key85:'', key86:'', key87:'', key88:'', key89:'', key90:'', key91:'', key92:'', key93:'', key94:'', key95:'', key96:'', key97:'', key98:'', key99:'', key100:'', key101:'', key102:'', key103:'', key104:'', key105:'', key106:'', key107:'', key108:'', key109:'', key110:'', key111:'', key112:'', key113:'', key114:'', key115:'', key116:'', key117:'', key118:'', key119:'', key120:'', key121:'', key122:'', key123:'', key124:'', key125:'', key126:'', key127:'', key128:'', key129:'', key130:'', key131:'', key132:'', key133:'', key134:'', key135:'', key136:'', key137:'', key138:'', key139:'', key140:'', key141:'', key142:'', key143:'', key144:'', key145:'', key146:'', key147:'', key148:'', key149:'', key150:'', key151:'', key152:'', key153:'', key154:'', key155:'', key156:'', key157:'', key158:'', key159:'', key160:'', key161:'', key162:'', key163:'', key164:'', key165:'', key166:'', key167:'', key168:'', key169:'', key170:'', key171:'', key172:'', key173:'', key174:'', key175:'', key176:'', key177:'', key178:'', key179:'', key180:'', key181:'', key182:'', key183:'', key184:'', key185:'', key186:'', key187:'', key188:'', key189:'', key190:'', key191:'', key192:'', key193:'', key194:'', key195:'', key196:'', key197:'', key198:'', key199:'', key200:'', key201:'', key202:'', key203:'', key204:'', key205:'', key206:'', key207:'', key208:'', key209:'', key210:'', key211:'', key212:'', key213:'', key214:'', key215:'', key216:'', key217:'', key218:'', key219:'', key220:'', key221:'', key222:'', key223:'', key224:'', key225:'', key226:'', key227:'', key228:'', key229:'', key230:'', key231:'', key232:'', key233:'', key234:'', key235:'', key236:'', key237:'', key238:'', key239:'', key240:'', key241:'', key242:'', key243:'', key244:'', key245:'', key246:'', key247:'', key248:'', key249:''
       
				},
				imgList: [],
				tableLabels: [
					['水质自动采样系统', ['检修情况描述', '更换部件1', '更换部件2'], 0], // 3
					['化学需氧量自动分析仪', ['设备型号及编号', '检修情况描述', '更换部件1', '更换部件2'], 3], // 7
					['氨氮自动分析仪', ['设备型号及编号', '检修情况描述', '更换部件'], 7], // 10
					['总氮、总磷自动分析仪', ['设备型号及编号', '检修情况描述', '更换部件'], 10], // 13
					['其他设备', ['设备型号及编号', '检修情况描述', '更换部件'], 13], // 16
					['其他设备', ['设备型号及编号', '检修情况描述', '更换部件'], 16], // 19
					['其他设备', ['设备型号及编号', '检修情况描述', '更换部件'], 19], // 22
					['流量计', ['设备型号及编号', '检修情况描述', '更换部件'], 22], // 25
					['数据釆集传输仪', ['设备型号及编号', '检修情况描述', '更换部件'], 25] // 28
				 ],
				faultTypeList: [],
				faultType: null,
			}
		},
		mounted() {
			// 初始化字典
			this.typeList = getDict('e015')
			// console.log(this.typeList)
			// console.log(this.obj)
			// 默认值填充
			this.form.key1=this.obj.equipmentTypeName
			this.form.key3 = this.obj.equipmentNumber
			if(this.obj.formContent){
				this.form = JSON.parse((this.obj.formContent))
			}else if (this.obj.lastMaintenance) {
			    var lastMaintenance = JSON.parse(this.obj.lastMaintenance.formContent)
			    this.form.key1 = lastMaintenance.key1
			    this.form.key2 = lastMaintenance.key2
			    this.form.key3 = lastMaintenance.key3
			    this.form.key5 = lastMaintenance.key5
			}
			
			if(this.obj.filePath){
				this.imgList =  JSON.parse((this.obj.filePath))
			}
			if(this.obj.equipmentTypeName != undefined ){
				if (this.obj.equipmentTypeName.indexOf('COD') !== -1) {
				    this.faultTypeList = getDict('e063')
				} else if (this.obj.equipmentTypeName.indexOf('氨氮') !== -1) {
				    this.faultTypeList = getDict('e064')
				} else if (this.obj.equipmentTypeName.indexOf('总磷') !== -1) {
				    this.faultTypeList = getDict('e065')
				} else if (this.obj.equipmentTypeName.indexOf('总氮') !== -1) {
				    this.faultTypeList = getDict('e066')
				}
			}else{
				if (this.obj.faultType.indexOf('e063') !== -1) {
				    this.faultTypeList = getDict('e063')
				} else if (this.obj.faultType.indexOf('e064') !== -1) {
				    this.faultTypeList = getDict('e064')
				} else if (this.obj.faultType.indexOf('e065') !== -1) {
				    this.faultTypeList = getDict('e065')
				} else if (this.obj.faultType.indexOf('e066') !== -1) {
				    this.faultTypeList = getDict('e066')
				}
			}
			
			this.faultType = this.obj.faultType
			debugger
		},
		onShow(){
			// console.log(this.form)
		},
		methods: {
			dateChange(res,type){
				this.$set(this.form,type,res.key)
			},
			getSelectIndex(list,key,listKey = 'id') {
				let index = null
				list.forEach((item,i)=>{
					if(item[listKey] === key){
						index = i
						return index;
					}
				})
				return index
			},
			setFormData(e) {
				const index = e.detail.value
				const item = this.faultTypeList[e.detail.value]
				this.faultType = item.code
			},
			getFormData(){
				
				return {
					formContent: JSON.stringify(this.form),
					filePath: JSON.stringify(this.$refs.imgUpload ? this.$refs.imgUpload.getPaths() : []),
					faultType: this.faultType
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
